<template>
    <div class="main-content">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="#">财务</BreadcrumbItem>
                <BreadcrumbItem href="#">余额管理</BreadcrumbItem>
                <BreadcrumbItem href="#">分配余额</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card style="padding-top:24px;">
            <Form :label-width="120" :rules="ruleValidate" :model="formValidate" ref="formValidate">
                <p class="text-bottom">
                    <span class="label-width">可分配余额：</span>
                    <span style="font-size:24px;color:#ed3f14;">{{amount}}</span>
                </p>
                <p>
                    <FormItem label="充值客户：" prop="user_id">
                        <Select v-model="formValidate.user_id" style="width:300px;" @on-change="changeMess">
                            <Option v-for="(item,index) in memberArr" :key="index" :value="item.user_id">{{item.org_name}}</Option>
                        </Select>
                    </FormItem>
                </p>
                <p class="text-bottom">
                    <span class="label-width">公司名称：</span>
                    <span>{{memberMess.org_name}}</span>
                </p>
                <p class="text-bottom">
                    <span class="label-width">客户余额：</span>
                    <span>{{memberMess.amount}}</span>
                </p>
                <p class="text-bottom">
                    <span class="label-width">审核状态：</span>
                    <span>{{curStatus}}</span>
                </p>
                <p class="text-bottom">
                    <span class="label-width">联系人：</span>
                    <span>{{memberMess.user_name}}</span>
                </p>
                <p class="text-bottom">
                    <span class="label-width">手机号码：</span>
                    <span>{{memberMess.user_phone}}</span>
                </p>
                <p class="text-bottom">
                    <span class="label-width">QQ号码：</span>
                    <span>{{memberMess.user_qq}}</span>
                </p>
                <p>
                    <FormItem label="充值金额：" prop="money">
                        <Input v-model="formValidate.money" placeholder="请输入充值金额：" style="width:300px;"></Input>
                    </FormItem>
                </p>
                <p>
                    <FormItem label="口令：" prop="password">
                        <Input v-model="formValidate.password" placeholder="请输入通行口令：" style="width:300px;"></Input>
                    </FormItem>
                </p>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">充值</Button>
                    <Button type="ghost" @click="reset('formValidate')" style="margin-left: 20px">重置</Button>
                </FormItem>
            </Form>

        </Card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            memberArr: [],
            memberMess: {
                org_name: '-',
                audit_status: '-',
                user_name: '-',
                user_phone: '-',
                user_qq: '-'
            },
            formValidate: {
                password: '',
                money: '',
                user_id: ''
            },
            ruleValidate: {
                user_id: [{
                    required: true,
                    type: 'number',
                    message: '请选择需充值的客户',
                    trigger: 'change'
                }],
                money: [{
                    required: true,
                    message: '请输入充值金额，且充值金额不超过可分配余额',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请输入账户口令',
                    trigger: 'blur'
                }]
            },
            page: {
                current: 1,
                total: 100,
                size: 50
            },
            amount: ''

        }
    },
    computed: {
        curStatus() {
            if (this.memberMess.audit_status === 1) {
                return '审核中';
            } else if (this.memberMess.audit_status === 2) {
                return '审核通过'
            } else if (this.memberMess.audit_status === 3) {
                return '审核拒绝'
            } else {
                return '-';
            }
        }
    },
    mounted() {
        this._loadData();
        this._loadData2();
    },
    methods: {
        _loadData() {
            let vm = this;
            let params = {
                type: 'get',
                url: 'member/all',
                params: {
                },
                sCallback(data) {
                    vm.memberArr = data.data.data;
                    vm.org_name = data.data.data.org_name;
                },
                eCallbakc(e) {
                    console.log(e);
                }
            };
            this.http.request(params);
        },
        _loadData2() {
            let vm = this;
            let params = {
                type: 'get',
                url: 'finance/getbalance',
                params: {
                },
                sCallback(data) {
                    vm.amount = data.data.amount;
                },
                eCallbakc(e) {
                    console.log(e);
                }
            };
            this.http.request(params);
        },
        postData() {
            let vm = this;
            let params = {
                type: 'post',
                url: 'finance/recharge',
                params: {
                    user_id: vm.formValidate.user_id,
                    money: vm.formValidate.money,
                    password: vm.formValidate.password
                },
                sCallback(data) {
                    if (data.code === 80002) {
                        vm.$Message.error('余额不足，请及时充值!')
                    } else if (data.code === 80001) {
                        vm.$Message.error('充值口令错误，请确认后再输入!')
                    } else if (data.errorCode === 10000) {
                        vm.$Message.error('充值金额必须为正整数,且不大于账户余额!')
                    } else {
                        vm.makeSure()
                    }
                },
                eCallback(e) {
                    vm.$Message.error(e.data.msg);
                }
            };
            vm.http.request(params);
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.postData();
                } else {
                    this.$Message.error('请检查您输入的信息是否有误!');
                }
            })
        },
        changeMess(data) {
            for (let i in this.memberArr) {
                if (data === this.memberArr[i].user_id) {
                    this.memberMess = this.memberArr[i];
                }
            }
        },
        makeSure() {
            let vm = this;
            this.$Modal.confirm({
                title: '确认往该账户充值？',
                content: '是否确认往该账号充值。充值后该账户金额充沛才可开启广告',
                onOk: () => {
                    vm.$Message.success('提交成功!');
                    vm.$router.push({
                        path: '/home/finance/balance'
                    });
                },
                onCancel: () => {
                    vm.$Message.info('已取消往该账户充值！');
                }
            })
        },
        reset(name) {
            this.$refs[name].resetFields();
            this.memberMess = {}
        }
    }
}
</script>
<style lang="stylus">
.label-width {
    display: inline-block;
    text-align: right;
    width: 120px;
    padding-right: 12px;
}

.text-bottom {
    margin-bottom: 24px;
    font-size: 12px;
}
</style>
